<script setup>
import { ref } from 'vue';
import { Button, Cell, CellGroup, Dialog, Form, Field, Tag } from 'vant';

// 定义响应式变量
const jobConfigs = ref([
  {
    id: 1,
    name: 'User Behavior Analysis',
    jarPath: '/path/to/user-behavior.jar',
    entryClass: 'com.example.UserBehaviorAnalysis',
    programArgs: '--source kafka --sink mysql',
    parallelism: 2,
    status: 'running', // running, stopped, failed
    lastRunTime: '2024-03-21 14:30:00'
  },
  {
    id: 2,
    name: 'Order Processing Pipeline',
    jarPath: '/path/to/order-processing.jar',
    entryClass: 'com.example.OrderProcessing',
    programArgs: '--mode production',
    parallelism: 4,
    status: 'stopped',
    lastRunTime: '2024-03-20 09:15:00'
  }
]);

const showDialog = ref(false);
const currentConfig = ref(null);

// 获取状态标签的样式
const getStatusTag = (status) => {
  const statusMap = {
    running: { type: 'success', text: '运行中' },
    stopped: { type: 'default', text: '已停止' },
    failed: { type: 'danger', text: '运行失败' }
  };
  return statusMap[status] || { type: 'default', text: '未知' };
};

// 打开配置详情对话框
const openConfigDialog = (config) => {
  currentConfig.value = { ...config };
  showDialog.value = true;
};

// 提交配置修改
const submitConfig = () => {
  console.log('提交配置:', currentConfig.value);
  showDialog.value = false;
};

// 创建新配置
const createNewConfig = () => {
  currentConfig.value = {
    name: '',
    jarPath: '',
    entryClass: '',
    programArgs: '',
    parallelism: 1,
    status: 'stopped'
  };
  showDialog.value = true;
};

// 操作任务
const handleJob = (action, config) => {
  console.log(`${action} job:`, config);
  // 这里添加实际的任务操作逻辑
};
</script>

<template>
  <div class="flink-config-container">
    <div class="header">
      <h2 class="title">Flink 任务配置</h2>
      <van-button type="primary" size="small" icon="plus" @click="createNewConfig">
        新建配置
      </van-button>
    </div>

    <div class="config-list">
      <van-cell-group inset v-for="config in jobConfigs" :key="config.id" class="config-item">
        <van-cell :title="config.name" :label="config.jarPath" is-link @click="openConfigDialog(config)">
          <template #value>
            <van-tag :type="getStatusTag(config.status).type" size="medium">
              {{ getStatusTag(config.status).text }}
            </van-tag>
          </template>
        </van-cell>
        <van-cell title="最近运行" :value="config.lastRunTime" />
        <van-cell>
          <template #title>
            <div class="action-buttons">
              <template v-if="config.status === 'stopped'">
                <van-button 
                  size="small" 
                  type="primary" 
                  @click="handleJob('start', config)"
                >启动</van-button>
              </template>
              <template v-else-if="config.status === 'running'">
                <van-button 
                  size="small" 
                  type="warning" 
                  @click="handleJob('stop', config)"
                >停止</van-button>
              </template>
              <van-button 
                size="small" 
                type="danger" 
                plain
                @click="handleJob('delete', config)"
              >删除</van-button>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <van-dialog 
      v-model:show="showDialog" 
      title="配置详情" 
      show-cancel-button 
      @confirm="submitConfig"
      class="config-dialog"
    >
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="currentConfig.name"
            label="任务名称"
            placeholder="请输入任务名称"
            :rules="[{ required: true, message: '请填写任务名称' }]"
          />
          <van-field
            v-model="currentConfig.jarPath"
            label="JAR 路径"
            placeholder="请输入 JAR 包路径"
            :rules="[{ required: true, message: '请填写 JAR 路径' }]"
          />
          <van-field
            v-model="currentConfig.entryClass"
            label="入口类"
            placeholder="请输入入口类"
            :rules="[{ required: true, message: '请填写入口类' }]"
          />
          <van-field
            v-model="currentConfig.programArgs"
            label="程序参数"
            type="textarea"
            rows="2"
            placeholder="请输入程序参数"
          />
          <van-field
            v-model="currentConfig.parallelism"
            label="并行度"
            type="digit"
            placeholder="请输入并行度"
            :rules="[{ required: true, message: '请填写并行度' }]"
          />
        </van-cell-group>
      </van-form>
    </van-dialog>
  </div>
</template>

<style scoped>
.flink-config-container {
  padding: 16px;
  background: var(--background-color);
  min-height: calc(100vh - 100px);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.config-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.config-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.config-item:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.action-buttons {
  display: flex;
  gap: 8px;
}

:deep(.van-tag) {
  padding: 2px 8px;
}

:deep(.van-cell-group) {
  margin: 0;
}

:deep(.van-dialog__content) {
  padding: 16px 0;
}

:deep(.van-form .van-cell-group) {
  margin: 0 16px;
}
</style>
